<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-08-11 11:31:57
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-11-05 11:28:00
-->
<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="add modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div style="width:800px!important;margin: 1.75rem auto;">
        <div class="modal-content">
            <form *ngIf="active" #bopForm="ngForm" novalidate autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span *ngIf="flag">审批</span>
                        <span *ngIf="!flag">审批查看</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                        [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 630px!important;overflow: auto;">
                    <div class="p-formgroup-inline" style="display: flex;justify-content: space-evenly;">
                        <div class="flex">
                            <label style="margin-top: 5px;">变更类型*</label>
                            <p-dropdown [disabled]="title == '审批'" required name="changeType"
                                #changeTypeSelect="ngModel" placeholder="请选择变更类型" [options]="changeTypeOption"
                                [(ngModel)]="form.modifyType">
                                <ng-template let-select pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                                </ng-template>
                                <ng-template let-select pTemplate="select">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 175px; ">
                                            {{select.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="changeTypeSelect"></validation-messages>
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;">变更原因*</label>
                            <p-dropdown [disabled]="title == '审批'" required name="reason" #reasonSelect="ngModel"
                                [options]="reasonOption" placeholder="请选择变更原因" [(ngModel)]="form.modifyReason">
                                <ng-template let-select pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width:175px;">{{select.label}}</span>
                                </ng-template>
                                <ng-template let-select pTemplate="select">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 175px; ">
                                            {{select.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="reasonSelect"></validation-messages>
                        </div>
                    </div>
                    <div class="p-formgroup-inline"
                        style="display: flex;justify-content: space-evenly;margin-top: 20px;">
                        <div class="flex">
                            <label style="margin-top: 5px;width: 58.02px;">型号*</label>
                            <p-dropdown [disabled]="title == '审批'" filter="true" name="module" #modelInput="ngModel"
                                [options]="moduleOptions" placeholder="请选择型号" [(ngModel)]="form.modelId"
                                emptyFilterMessage="暂无数据" required (onChange)="onChange($event)">
                                <ng-template let-item pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width: 117px;">{{item.label}}</span>
                                </ng-template>
                                <ng-template let-model pTemplate="item">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 117px;">
                                            {{model.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="modelInput"></validation-messages>
                        </div>
                        <div class="flex">
                            <label style="margin-top: 5px;width: 58.02px;">发次*</label>
                            <p-dropdown [disabled]="title == '审批'" filter="true" name="sendTime"
                                [options]="sendTimeOptions" placeholder="请选择发次" [(ngModel)]="form.lotNoId"
                                emptyFilterMessage="暂无数据" #lotNoInput="ngModel" required>
                                <ng-template let-item pTemplate="selectedItem">
                                    <span
                                        style="vertical-align:middle; margin-left: .5em;width: 117px;">{{item.label}}</span>
                                </ng-template>
                                <ng-template let-model pTemplate="item">
                                    <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                        <div style="font-size:14px;float:right;margin-top:4px;width: 117px;">
                                            {{model.label}}
                                        </div>
                                    </div>
                                </ng-template>
                            </p-dropdown>
                            <validation-messages [formCtrl]="lotNoInput"></validation-messages>
                        </div>
                    </div>
                    <div class="p-formgroup-inline" style="margin-top: 20px;display: flex;">
                        <h4>关联规程清单：</h4>
                        <div class="flex">
                            <label style="margin-top: 5px;">规程编号：</label>
                            <input [disabled]="title == '审批'" style=" width:150px;height: 35px;margin-left: 10px;"
                                id="code" name="code" type="text" [(ngModel)]="form.techniqueNumber" />
                        </div>
                        <div class="flex" style="margin-left: 5px;">
                            <label style="margin-top: 5px;">规程名称：</label>
                            <input [disabled]="title == '审批'" style=" width:150px;height: 35px;margin-left: 10px;"
                                id="rulesName" name="rulesName" type="text" [(ngModel)]="form.techniqueName" />
                        </div>
                    </div>
                    <div class="row align-items-center" style="margin-top: 20px;">
                        <div class="primeng-datatable-container">
                            <p-table #dataTable [value]="primengTableHelper.records"
                                rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                                [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                [responsive]="primengTableHelper.isResponsive"
                                [resizableColumns]="primengTableHelper.resizableColumns" [(selection)]="selectRow"
                                dataKey="id">
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 3em"></th>
                                        <th style="width: 150px">规程编号</th>
                                        <th style="width: 150px">名称</th>
                                        <th style="width: 150px">图号</th>
                                        <th style="width: 150px">子版本</th>
                                    </tr>
                                </ng-template>
                                <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                    <tr>
                                        <td style="width: 3em">
                                            <p-tableRadioButton [value]="record"></p-tableRadioButton>
                                        </td>
                                        <td style="width: 150px">{{record.techniqueNumber}}</td>
                                        <td style="width: 150px">{{record.techniqueName}}</td>
                                        <td style="width: 150px">{{record.moduleCode}}</td>
                                        <td style="width: 150px">{{record.edition}}</td>
                                    </tr>
                                </ng-template>
                            </p-table>
                            <div class="primeng-paging-container">
                                <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                    (onPageChange)="getTableList($event)"
                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                </p-paginator>
                                <span class="total-records-count">
                                    {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="p-formgroup-inline">
                        <div class="flex">
                            <label style="margin-top: 5px;">变更维护*</label>
                            <button style="margin-left: 20px;" pButton type="button" (click)="toMaintain()" label="维护"
                                class="ui-button-raised"></button>
                        </div>
                    </div>
                    <div class="p-formgroup-inline" style="margin-top: 20px;">
                        <label style="margin-top: 5px;">制品处理意见：</label>
                        <textarea [disabled]="title == '审批'" name="opinion" rows="2" cols="100" pInputTextarea
                            [(ngModel)]="form.productOpinions"></textarea>
                    </div>
                    <div class="p-formgroup-inline" style="margin-top: 20px;">
                        <label style="margin-top: 5px;">变更内容：</label>
                        <textarea [disabled]="title == '审批'" name="content" rows="2" cols="100" pInputTextarea
                            [(ngModel)]="form.content"></textarea>
                    </div>
                    <div class="p-formgroup-inline" style="margin-top: 20px;">
                        <label style="margin-top: 5px;">备注：</label>
                        <textarea [disabled]="title == '审批'" name="remark" rows="2" cols="100" pInputTextarea
                            [(ngModel)]="form.remark"></textarea>
                    </div>
                </div>
                <div class="modal-footer" style="flex-wrap: wrap;" *ngIf="flag">
                    <div class="p-formgroup-inline">
                        <div >
                            <label style="margin-top: 5px;">审批意见：</label>
                            <textarea name="approvalRemark" rows="2" cols="100" pInputTextarea
                            [(ngModel)]="approvalForm.remark"></textarea>
                        </div>
                    </div>
                    <div class="p-formgroup-inline" style="width: 100%;
                    display: flex;
                    justify-content: center;
                    margin-top: 10px">
                        <button pButton class="ui-button-danger" type="button" label="拒绝" (click)="confues()"
                        style="margin-left: 0.5rem"></button>
                    <button pButton type="button" label="同意"
                        (click)="accept()" style="margin-left: 0.5rem"></button>
                    </div>
                </div>
                <div class="modal-footer" style="flex-flow: row wrap;
                justify-content: center;
                align-items: center;" *ngIf="!flag">
                    <div class="p-formgroup-inline " [ngClass]="getClass(item)" *ngFor="let item of approvalList">
                        <div *ngIf="item.result == 1"><i class="pi pi-check-circle" style="font-size: 3em"></i></div>
                        <div *ngIf="item.result == 2"><i class="pi pi-times" style="font-size: 3em"></i></div>
                        <div>{{item.getAffairRoles}}</div>
                        <div>{{item.userName}}，{{item.auditTime | momentFormat:'YYYY-MM-DD HH:mm:ss'}}</div>
                        <div>审批意见：{{item.remark}}</div>
                    </div>  
                </div>
            </form>
            <!-- 变更维护查看 -->
            <app-detail #DetailComponent [parentInfo]="selectRow" ></app-detail>
        </div>
    </div>
</div>`